<template>
   <div>
     <div class="list-btn">
       姓名:<Input v-model.trim="params.realname" placeholder="请输入姓名" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
     </div>
     <div class="list-btn">
       手机号:<Input v-model.trim="params.phone" placeholder="请输入手机号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
     </div>
     <div class="list-btn">
       订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
     </div>
     <div class="list-btn">
       放款时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
       ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
     </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
    <Modal
      v-model="show"
      :title="`${type}`"
      width="500px"
      :footer-hide="true"
      :loading="loading"
      :closable="false"
      :mask-closable="false">
      <Form ref="formRole" :rules="ruleValidate" :model="formRole" :label-width="80">
        <FormItem label="金额" prop="money">
          <Input v-model="formRole.money" placeholder="请输入" style="width:200px" number></Input>
        </FormItem>
        <FormItem label="上传凭证" prop="image" v-if="type=='销账'">
          <upload-img :show-img="formRole.image" v-model="formRole.image" @handleSuccess="handleSuccessImg"></upload-img>
        </FormItem>

        <!-- <FormItem label="状态" prop="deleted">
          <Select clearable v-model="formRole.deleted" placeholder="请选择" style="width:200px">
            <Option :value=0>启用</Option>
            <Option :value=1>禁用</Option>
          </Select>
        </FormItem> -->
      </Form>
      <div style="margin-left: 350px;">
        <Button @click="show = false;resetValidate('formRole')">取消</Button>
        <Button type="primary" @click="submitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  import uploadImg from '../../template/uploadImgs'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog,
        uploadImg
    },
    data () {
      return {

        tag: {
          'title': '已放款',
          'path': '/work/payFinish/list'
        },
        listTitle: [
          {
            title: '订单号',
            width: 180,
            key: 'nid',
            align:'left',
          },
          {
            title: '放款时间',
            key: 'accountTime',
            width:150,
            align:'center',
            render:(h,params) => {
              return h('div',this.getLocalTime(params.row.accountTime))
            }
          },
          {
            title: '用户姓名',
            key: 'realname',
            width:140,
            align:'center'
          },
          {
            title: '手机号',
            key: 'phone',
            width:140,
            align:'center'
          },
          {
            title: '借款信息',
            key: 'money',
            width:140,
            align:'center',
             render:(h,params) => {
              return h('div',`${this.toYuan(params.row.money)}(${params.row.day}天)`)
            }
          },
          {
            title: '报告费(元)',
            key: 'loanCost',
            width:140,
            align:'center',
             render:(h,params) => {
              return h('div',this.toYuan(params.row.loanCost))
            }

          },
          {
            title: '实放金额(元)',
            key: 'realMoney',
            width:140,
            align:'center',
            render:(h,params) => {
              return h('div',this.toYuan(params.row.realMoney))
            }
          },
         /* {
            title: '借款周期(天)',
            key: 'day',
            width:110,
            align:'center',
          },*/
          {
            title: '银行名称',
            key: 'bankName',
            width:200,
            align:'center'
          },
          {
            title: '银行卡号',
            key: 'bankNum',
            width:200,
            align:'center'
          },
          {
            title: '放款通道',
            key: 'lendingChannel',
            width:110,
            align:'center',
            render:(h,params) => {
              return h('div',this.getType(params.row.lendingChannel,'lendingChannel'))
            }
          },
          {
            title: '流水号',
            key: 'contractNumber',
            width:250,
            align:'center',
          },
          {
            title: '状态',
            key: 'repaymentStatus',
            width:110,
            align:'center',
             render:(h,params) => {
              return h('div',this.getType(params.row.repaymentStatus,'loanStatus'))
            }
          },
        //  {
        //   title: "操作",
        //   key: "action",
        //   minWidth:240,
        //   align:'center',
        //   render: (h, params) => {
        //     // let btnType = "";
        //     // let display =''
        //     // if(params.row.deleted == 1){
        //     //   btnType = '下架';
        //     //   display = 'none' //发布
        //     // }else if(params.row.deleted == 2){
        //     //   btnType ='上架';
        //     //   display = 'inline-block' //下架
        //     // }

        //     return h("div", [
        //       h(
        //         "Button",
        //         {
        //           props: {
        //             type: "info",
        //             size: "small"
        //           },
        //           style: {
        //             marginRight: "6px"
        //           },
        //           on: {
        //             click: () => {
        //               this.show = true;
        //               this.type ="销账"
        //               // this.resetValidate('formRole');
        //             //  this.type = '预览';
        //             //  this.title="预览公告";

        //             //  this.status = true;
        //             //  this.showModal = true;
        //             //  this.formRole = JSON.parse(JSON.stringify(params.row));
        //             }
        //           }
        //         },
        //         "销账"
        //       ),
        //        h(
        //         "Button",
        //         {
        //           props: {
        //             type: "info",
        //             size: "small",
        //           },
        //           style: {
        //             marginRight: "6px",
        //           },
        //           on: {
        //             click: () => {
        //               this.show = true;
        //               this.type ="减免";
        //               // this.resetValidate('formRole');
        //               // this.type = '编辑';
        //               // this.title="编辑公告";
        //               // this.resetValidate();
        //               // this.showModal = true;
        //               // this.status = false;
        //               // this.formRole = JSON.parse(JSON.stringify(params.row));
        //             }
        //           }
        //         },
        //         '减免'
        //       ),
        //     ]);
        //   }
        // }
        ],
        url: '/bkfinancialloan/already/list',
        nameListUrl: '',
        params: {
          name: '',
          nameList: [],
          pageNum: 1,
          pageSize: 10
        },
        show:false,
        formRole: {},
        type:'销账',
        ruleValidate: {
          money: [
            { required: true, message: '请输入金额', trigger: 'blur' ,type:'number' }
          ],
          image: [
            { required: true, message: '请选择图片', trigger: 'blur' }
          ],
        },
      }
    },
    methods:{
       handleSuccessImg(data) {
         console.log(data,'ddd');
          this.$set(this.formRole, 'image', data.imgUrl)
      },
      submitModal(){
        this.$refs.formRole.validate((valid) => {
          if(valid){
            this.resetValidate('formRole');
            this.show = false;
          }
        })
    }
  }
 }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
/deep/ .ivu-upload.ivu-upload-select{
  .picture {
    width: 300px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border:1px dashed #eaeaea;
  }
  .avatar, .avatar-uploader{
    width:100%;
    height:100%;
  }
}
</style>
